{% extends 'index.html' %}
{% load custom_tag %}
{% block page-content %}
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
{#<link href="/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet">#}
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" placeholder="YYYY-MM-DD"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control" placeholder="YYYY-MM-DD"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div style="width:200px;margin:0 auto;">
        <button class="btn btn-primary" onclick="get_hislist(1)">查询</button>
    </div>
</div>

<div class="row">

    <div class="col-lg-12">
        <div class="panel" >
            <div class="pannel-heading">
                <h3 class="panel-title">镜像上传历史</h3>
            </div>
            <div class="pannel-body">
                <table class="table table-bordered" id="iso-history">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>上传时间</th>
                                <th>IP</th>
                                <th>文件名</th>
                                <th>目录</th>
                                <th>状态</th>
                            </tr>
                        </thead>

                </table>
                <div class="pagination pull-left">

                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block bottom-js %}
<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
{#<script src="/static/js/bootstrap-datetimepicker.min.js"></script>#}
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" >
$(function () {
    $('#datetimepicker1').datetimepicker({
        viewMode: 'days',
        language:'zh-CN',
        format: "YYYY-MM-DD",
        minView:'month',
        autoclose: true,
        todayBtn:true,
        pickTime:false


    });
    $('#datetimepicker2').datetimepicker({
        viewMode: 'days',
        language:'zh-CN',
        format: "YYYY-MM-DD",
        autoclose: true,
        todayBtn:true,
        pickTime:false

    });
    $("#datetimepicker1").on("dp.change", function (e) {
        $('#datetimepicker2').data("DateTimePicker").setMinDate(e.date);
        $('#datetimepicker1').data("DateTimePicker").hide();
    });
    $("#datetimepicker2").on("dp.change", function (e) {
        $('#datetimepicker1').data("DateTimePicker").setMaxDate(e.date);
        $('#datetimepicker2').data("DateTimePicker").hide();
    });
});

function get_hislist(page) {
    var from_time=$("#datetimepicker1 input").val();
    var to_time=$("#datetimepicker2 input").val();
    var action='select';
    $.ajax({
        url: "/iso/history/",
        type: "POST",
        data: {action:action,from_time:from_time,to_time:to_time,page:page},
        success: function (callback) {
            console.log(callback);
            $('.host').remove();
            var result=JSON.parse(callback);
            var his_list=result['his_list'];
            var page_num=result['page_num'];
            $.each(his_list,function (index,history) {
                var time=moment.unix(history[1]).format('YYYY-MM-DD HH:mm:ss');
                var html="<tr class='host'><td>"+history[0]+"</td><td>"+time+"</td><td>"+history[2]+"</td><td>"+history[3]+"</td><td>"+history[4]+"</td><td>"+history[5]+"</td></tr>";
                $('#iso-history').append(html);
            });
            $('.pagination').empty();
            for(var i=1;i<=parseInt(page_num);i++){
                if(i==parseInt(page)){
                    var html_page="<li  class='active'><a href='#' onclick='get_hislist("+i+")'>"+i+"</a></li>";
                }else{
                    var html_page="<li><a href='#' onclick='get_hislist("+i+")'>"+i+"</a></li>";
                }

                $('.pagination').append(html_page);
            }
        }

    })
}

</script>
{% endblock %}